<template>
  <div class="patent">
    <div v-if="!loading && patentData.length > 0">
      <div class="result-total">找到约{{ total }}条相关结果</div>
      <el-table
      class="table"
        :data="patentData"
        style="width: 100%"
        @cell-click="handleCellClick"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="ttl" label="专利名称">
          <template #default="scope">
            <p class="tit">
              {{ scope.row.ttl_zh || scope.row.ttl || scope.row.ttl_en }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="apn" label="申请号" width="180">
        </el-table-column>
        <el-table-column prop="apd" label="申请日" width="115">
        </el-table-column>
        <el-table-column prop="pn" label="公开/公告号" width="150">
        </el-table-column>
        <el-table-column prop="isd" label="公开/公告日" width="115">
        </el-table-column>
        <el-table-column prop="ipc" label="IPC/LOC">
          <template #default="scope">
            {{ (scope.row.ipc || []).join("、") }}
          </template>
        </el-table-column>
        <el-table-column prop="leg_det" label="法律状态" width="120">
        </el-table-column>
      </el-table>
      <el-pagination
        class="elpagination"
        hide-on-single-page
        background
        layout="prev, pager, next, jumper"
        :current-page.sync="searchInfo.page"
        :page-size="searchInfo.limit"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div v-else class="result-total">{{ emptyText }}</div>
  </div>
</template>
<script>
export default {
  props: {
    nodeInfo: {
      type: Object,
      default: () => {
        return {
          chainName: "",
          eid: "",
          name: "",
        };
      },
    },
  },
  data() {
    return {
      loading: false,
      emptyText: "数据加载中...",
      searchInfo: {
        page: 1,
        limit: 10,
        chainName: "",
        name: "",
        eid: "",
        keyword: "",
      },
      total: 0,
      patentData: [],
    };
  },
  watch: {
    nodeInfo: {
      handler(newVal) {
        this.searchInfo.page = 1;
        this.search();
      },
      deep: true,
    },
  },
  created() {
    this.search();
  },
  methods: {
    handleCurrentChange(val) {
      this.searchInfo.page = val;
      this.search();
    },
    search() {
      this.loading = true;
      this.emptyText = "数据加载中...";
      Object.assign(this.searchInfo, this.nodeInfo);
      this.$post(this.$Url.chain.patentRelNews, this.searchInfo).then((res) => {
        let data = res.data;
        this.loading = false;
        this.patentData = [];
        this.total = data.total;
        if (data.result.length && data.result.length > 0) {
          this.patentData = data.result;
        } else {
          this.emptyText = "暂无数据";
        }
      });
    },
    handleCellClick(row, column) {
      // console.log("row", row);
      if (column.property == "ttl") {
        this.$nextTick(() => {
          let routerUrl = this.$router.resolve({
            name: "DataCenterDetail",
            query: {
              id: row.pn,
              type: "patent",
              left: false,
            },
          });
          window.open(routerUrl.href, "_blank");
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.patent {
  .result-total {
    color: #838698;
    font-size: 0.14rem;
    line-height: 0.52rem;
    flex: none;
  }
  .tit {
    cursor: pointer;
  }
  .table {
    font-size: 16px;
  }
  .el-pagination.is-background {
    text-align: right;
    font-weight: 700;
    margin: 0.06rem 0 0.24rem 0;
    ::v-deep .el-pager {
      li:not(.disabled).active {
        background: transparent;
        color: $mainColor;
      }
      li {
        color: #c1c6d2;
        font-size: 0.16rem;
        font-weight: 400;
        background: #f6f7fb;
      }
    }
    ::v-deep .btn-prev {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .btn-next {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .el-pagination__jump {
      color: #c1c6d2;
      font-size: 0.16rem;
      .el-input--medium .el-input__inner {
        height: 0.26rem;
        border: 1px solid $mainColor;
        border-radius: 0;
      }
    }
  }
}
</style>
